<template>
  <div>
  <blog-header></blog-header>
    <hr/>
    <div>
  <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
    <FormItem prop="username">用户名：
      <Input type="text" v-model="formInline.username" placeholder="请输入用户名">
      <Icon type="ios-person-outline" slot="prepend"></Icon>
    </Input>

    </FormItem><br/>
    <FormItem prop="password">
      密码：<Input type="password" v-model="formInline.password" placeholder="请输入密码">
      <Icon type="ios-lock-outline" slot="prepend"></Icon>
    </Input>

    </FormItem><br/>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formInline')">用户注册</Button>
    </FormItem><br/>

    <span @click="See('http://localhost:8081/index')">跳转到服务器</span>



  </Form></div>
    <hr/>
  <blog-footer></blog-footer>
  </div>
</template>
<script>

  import blogHeader from '@/components/Header.vue'
  import blogFooter from '@/components/Footer.vue'

  export default {
    name: "Register",
    components: { blogHeader, blogFooter },

    data () {
      return {
        formInline: {
          username: '',
          password: ''
        },
        ruleInline: {
          username: [
            { required: true, message: '请输入用户名。', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码。', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码长度不能少于6位。', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSubmit(name) {
        /*this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('成功登录!');
          } else {
            this.$Message.error('登录失败!');
          }
        })*/

        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$axios({
              url: '/rest/register',//请求的地址
              method: 'post',//请求的方式
              data: this.formInline//请求的表单数据
            }).then(res => {
              console.info('后台返回的数据', res.data);
            }).catch(err => {
              console.info('报错的信息', err.response.message);
            });
          } else {
            this.$Message.error('表单校验失败!');
          }
        })
      },
      See (e) {
        window.location.href = e
      }

    }
  }
</script>




<style scoped>

</style>
